<template>
  <!-- 优质商家 -->
  <div class="new-product">
    <div class="new-patterns clearfix">
      <!-- 公共标题（中英文） -->
      <app-title :floor="floor"></app-title>
      <!-- 右侧选项 -->
      <ul class="new-pattern-nav fr">
        <li class="moreOver" @click="doMoreOver">更多>
        </li>
      </ul>
    </div>
    <!-- 如果数据存在 -->
    <div class="susiness-content clearfix" v-if="floor.wide_goods">
      <div class="fl susiness-img-bottom" @click="toStoreHome(middleStores.storeId)" v-for="(middleStores, index) in JSON.parse(floor.wide_goods)[0].goodsList" :key="index" :style="{ 'margin-left': `${index % 2 != 0 ? '10px' : '0px' }`}">
        <img v-lazy="middleStores.img" class="transition-fast img susiness-img-bottom-img">
        <div class="susiness-img-top">
          <div class="clearfix susiness-img-top-pc">
            <div class="fl susiness-goods-img transition-ease" @click.stop="toGoodsDetail(recoGood.goodsId)" v-for="(recoGood, index) in middleStores.recoGoods" :key="index">
              <div class="transition-ease imgs img">
                <img v-lazy="recoGood.img" class="add-img">
              </div>
              <p v-text="'￥' + recoGood.goodsPrice"></p>
            </div>
          </div>
          <div class="clearfix susiness-img-footer">
            <div class="fl susiness-footer-icon img minimg" v-lazy:background-image="middleStores.storeLogo" @click.stop="toStoreHome(middleStores.storeId)"></div>
            <div class="fl susiness-footer-collection">
              <div class="clearfix JCollect" :data-id="middleStores.storeId" :cc="collt(middleStores, index)">
                <div class="fl collectino-img jCollectIcon" :class="{'collectino-imgs': middleStores.whetherF == 1}" :id="middleStores.storeId" :cc="middleStores.whetherF"></div>
                <div class="fl collectino-text">收藏店铺</div>
              </div>
            </div>
            <div class="fr susiness-footer-into-shop" @click.stop="toStoreHome(middleStores.storeId)">
              进入店铺
            </div>   
          </div> 
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import appTitle from './AppTitle'
  export default {
    props: {
      floor: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        wideGoods: {},
        clocket: [0, 0, 0, 0, 0, 0]
      }
    },
    computed: {
      storeList() {
        if (this.wideGoods.middle && this.wideGoods.middle.storeList) {
          return this.wideGoods.middle.storeList || []
        }
        return []
      }
    },
    mounted() {
      if (this.floor.wideGoodsList) {
        this.wideGoods = this.floor.wideGoodsList[0] || {}
      }
    },
    methods: {
      /**
       * 跳转到店铺中
       *
       * @param { Number } id 店铺id
       */
      toStoreHome(id) {
        window.open('/shop/' + id)
      },

      /**
       * 数据绑定
       */
      collt(store, index) {
        this.clocket[index] = store.whetherF * 1
      },

      /**
       * 跳转到商品详情页
       *
       * @param { Number } id 商品id
       */
      toGoodsDetail(id) {
        window.open('/goods/detail/' + id)
      }
    },
    components: {
      appTitle
    }
  }
</script>

<style lang="scss" scoped>
</style>